<!--
 * @Description: 
 * @Author: huxianc
 * @Date: 2021-01-06 11:04:01
 * @LastEditors: huxianc
 * @LastEditTime: 2021-01-06 14:44:50
-->
<template>
  <div id="app">
    <div class="amap-wrapper">
      <el-amap class="amap-box" :vid="'amap-vue'" :zoom="zoom" :center="center">
        <div v-for="(dot, index) in texts" :key="index">
          <el-amap-circle
            :center="path[index]"
            :radius="circle.radius"
            :fill-opacity="circle.fillOpacity"
            :events="circle.events"
          ></el-amap-circle>
        </div>

        <el-amap-text
          v-for="(text, index) in texts"
          :key="text"
          :text="text"
          :offset="textConfig.offset"
          :position="path[index]"
        ></el-amap-text>

        <template v-if="path.length > 1">
          <el-amap-polyline :editable="false" :path="path"></el-amap-polyline>
        </template>
      </el-amap>
    </div>
  </div>
</template>

<script>
const center = [103.971658, 30.630416];
// const center1 = [103.984159, 30.641742];
// const center2 = [103.964159, 30.641742];
export default {
  data() {
    return {
      zoom: 20,
      center: center,
      circle: {
        radius: 2,
        fillOpacity: 0.5,
        events: {
          click: () => {
            console.log("click");
          }
        }
      },
      // path: [center, center1, center2],
      // texts: ["sadf", "tyrt", "fher"],
      path: [center],
      texts: ["1011"],
      textConfig: {
        offset: [0, 20]
      },
      ws: null
    };
  },
  mounted() {
    this.initWS();
  },
  methods: {
    initWS() {
      this.ws = new WebSocket("WS://192.168.1.248:6010/tag");

      this.ws.onmessage = async event => {
        const data = JSON.parse(event.data);
        console.log(data);

        if (data.ActionCode === 9999) {
          if (!this.texts.includes(data.Data.TagId)) {
            this.texts.push(data.Data.TagId);
          }
          const strArr = data.Data.locations.split(",");
          const numArr = strArr.map(item => Number(item));
          this.path.push(numArr);
        }
      };
    }
  }
};
</script>

<style lang="scss">
html,
body {
  margin: 0;
  padding: 0;
}
.amap-wrapper {
  height: 100vh;
}
</style>
